Gem@ BLOG

Un Slide muy atractivo con jQuery

En Codrops cada actualización es un reto, uno se pierde entre tanta maravilla y cuesta decidirse por algo concreto, son efectos muy llamativos y en algunos casos pueden llegar a eclipsar el contenido. Si de lo que se trata es precisamente de eso, de atraer la vista a un sitio concreto o impresionar entonces seguro encontraremos lo ideal.

Y lo ideal en este caso es un slide, o mejor dicho un gran slide. Impresionante ¿verdad? pues está todo muy bien explicado pero aún así vamos a intentar simplificar las cosas.

Para añadir este slide hay que tener en cuenta dos cosas, la primera es el tamaño y eso quiere decir que nuestro blog no debe tener en outer-wrapper menos de 902px de ancho (width) si mide más no hay problema.

El otro punto a tener en cuenta son las imágenes, el ejemplo contiene imágenes de Tucia son imágenes que visualmente parecen divididas en dos pero se puede añadir cualquier otra imagen siempre que tenga el mismo tamaño de las utilizadas.

Antes de comenzar es bueno saber que se utilizan cinco tamaños distintos de imágenes. En este archivo encontraremos las imágenes que se utilizaron y podemos tomar nota de los tamaños para crear nuestras propias imágenes.

El slide está compuesto de 5 áreas de distinto tamaño y cada área contiene 3 imágenes distintas y las 3 del mismo tamaño. A simple vista muestra 5 imágenes cuando en realidad llega a mostrar hasta 15.

Una vez tenemos nuestras imágenes preparadas nos situamos en plantilla edición de html y añadimos justo antes de </head> los estilos del slide


<style type='text/css'>
.hs_container{
 position:relative;
 width:902px;
 height:471px;
 overflow:hidden;
 clear:both;
 border:2px solid #fff;
 cursor:pointer;
 -moz-box-shadow:1px 1px 3px #222;
 -webkit-box-shadow:1px 1px 3px #222;
 box-shadow:1px 1px 3px #222;
}

.hs_container .hs_area{
 position:absolute;
 overflow:hidden;
}

.hs_area img{
 position:absolute;
 top:0px;
 left:0px;
 display:none;
}

.hs_area img.hs_visible{
 display:block;
 z-index:9999;
}

.hs_area1{
 border-right:2px solid #fff;
}
.hs_area4, .hs_area5{
 border-top:2px solid #fff;
}
.hs_area4{
 border-right:2px solid #fff;
}
.hs_area3{
 border-top:2px solid #fff;
}
.hs_area1{
 width:449px;
 height:334px;
 top:0px;
 left:0px;
}
.hs_area2{
 width:451px;
 height:165px;
 top:0px;
 left:451px;
}
.hs_area3{
 width:451px;
 height:167px;
 top:165px;
 left:451px;
}
.hs_area4{
 width:192px;
 height:135px;
 top:334px;
 left:0px;
}
.hs_area5{
 width:708px;
 height:135px;
 top:334px;
 left:194px;
}

</style>

A continuación pegamos jQuery:

Si ya estamos utilizando jQuery omitimos ese paso y añadimos jquery.easing.1.3.js lo descargamos y subimos a nuestro servidor para añadirlo a continuación de este modo:

O si lo preferimos copiamos el contenido del script y lo añadimos de esta forma:

<script type='text/javascript'>

//<![CDATA[

Aquí añadimos el contenido de jquery.easing.1.3.js

//]]>

</script>

Para terminar con los scripts copiamos el contenido de este otro archivo y lo pegamos a continuación del anterior tal y como se presenta.

Por último lo más entretenido añadir las imágenes.

Para saber donde incluir cada imagen nos fijaremos que las áreas van numeradas del 1 al 5 y las imágenes indican la posición y el área a la que pertenecen. Este sería un ejemplo de area1.

<div class="hs_area hs_area1">

<img class="hs_visible" src="Url-imagen/area1/1.jpg" alt=""/>

<img src="Url-imagen/area1/2.jpg" alt=""/>

<img src="Url-imagen/area1/3.jpg" alt=""/>

</div>

Comenzamos con las imágenes, en un gadget de HTML añadimos lo siguiente:


<div id="hs_container" class="hs_container">
<div class="hs_area hs_area1">
<img class="hs_visible" src="Url-imagen/area1/1.jpg" alt=""/>
<img src="Url-imagen/area1/2.jpg" alt=""/>
<img src="Url-imagen/area1/3.jpg" alt=""/>
</div>

<div class="hs_area hs_area2">
<img class="hs_visible" src="Url-imagen/area2/1.jpg" alt=""/>
<img src="Url-imagen/area2/2.jpg" alt=""/>
<img src="Url-imagen/area2/3.jpg" alt=""/>
</div>

<div class="hs_area hs_area3">
<img class="hs_visible" src="Url-imagen/area3/1.jpg" alt=""/>
<img src="Url-imagen/area3/2.jpg" alt=""/>
<img src="Url-imagen/area3/3.jpg" alt=""/>
</div>

<div class="hs_area hs_area4">
<img sclass="hs_visible" src="Url-imagen/area4/1.jpg" alt=""/>
<img src="Url-imagen/area4/2.jpg" alt=""/>
<img src="Url-imagen/area4/3.jpg" alt=""/>
</div>

<div class="hs_area hs_area5">
<img class="hs_visible" src="Url-imagen/area5/1.jpg" alt=""/>
<img src="Url-imagen/area5/2.jpg" alt=""/>
<img src="Url-imagen/area5/3.jpg" alt=""/>
</div>
</div>

En un principio parece complicado pero de tantos slider que he probado es uno de los más sencillos, y como siempre podemos ver el resultado de todo lo anterior.